<template>
  <el-dialog
    :title="titleMap[type]"
    :visible.sync="formVisible"
    :append-to-body="true"
  >
    <slot />
    <div slot="footer" class="dialog-footer">
      <el-button @click="formVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="type==='create'?create():update()">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'FormDialog',
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    type: {
      type: String,
      default: 'create'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      titleMap: {
        update: '修改',
        create: '添加'
      }
    }
  },

  computed: {
    formVisible: {
      get() {
        return this.visible
      },
      set(newValue) {
        this.$emit('change', newValue)
      }
    }
  },
  methods: {
    create() {
      this.$emit('create')
    },
    update() {
      this.$emit('update')
    }

  }
}
</script>

<style scoped>

</style>
